<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="用户搜索" prop="keyword">
          <el-input v-model="state.params.keyword" placeholder="请输入昵称、手机号"></el-input>
        </el-form-item>

        <el-form-item label="是否到期" prop="channel">
          <el-select v-model="state.params.is_expired" placeholder="不限">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

      </k-search>
    </div>

    <div class="base-block">
      <k-table v-bind="tableState" v-on="tableEvent">
        <template #nick_name="{row}">
          <UserNickname show-role :data="row" />
        </template>

        <!-- <template #actions="record">
          <el-link type="primary" @click="handleOpenDrawer(record)">编辑</el-link>
        </template> -->
      </k-table>
    </div>
  </PageListContainer>
</template>

<script setup lang="ts">
import UserNickname from '@/components/business/table-user-nickname/index.vue';
import { useTableList, statusOptions } from './hooks/use-table';
defineOptions({
  name: 'KgjAddCommuneUrderManage'
});

const { state, tableState, tableEvent, ...methods } = useTableList({});
</script>
